<template>
	<view>
		<button @click="showToast">
			showToast
		</button>

		<button @click="showLoading">
			showLoading
		</button>

		<button @click="showModal">
			showModal
		</button>

		<button @click="showActionSheet">
			showActionSheet {{name}}
		</button>

	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		setup() {
			const showToast = () => {
				uni.showToast({
					title: "随便测试一下弹窗",
					icon: 'success',
					duration: 30000,
					success() {
						setTimeout(() => {
							uni.hideToast()
						}, 1500)
					}
				})
			}
			const showLoading = () => {
				uni.showLoading({
					title: "加载中..."
				})
				console.log('开始加载数据...')
				console.log('加载中...')
				setTimeout(() => {
					console.log('加载完毕...');
					uni.hideLoading();
				}, 3000)
			}

			const showModal = () => {
				uni.showModal({
					title: "问答",
					content: "你抽到草神没？",
					cancelText: "没有",
					confirmText: "抽到了",
					success(e) {
						if (e.confirm) {
							uni.showToast({
								title: "恭喜你"
							})
						} else {
							uni.showToast({
								title: "想必你是歪了吧"
							})
						}
					}
				})
			}

			//ref 用于定义变量	
			const star = ref( ["竹内玛利亚", "侃爷", "李易峰", "吴亦凡"]);
			const name = ref("");

			const showActionSheet = () => {
				uni.showActionSheet({
					title: "你觉得那个明星最凉？",
					itemList: star.value,
					success(e) {
						console.log(e);
						//获取ref变量的值
						name.value = star.value[e.tapIndex]
						console.log(name);
					}
				})
			}

			uni.setNavigationBarTitle({
				title:"交互学习"
			})

			uni.setNavigationBarColor({
					backgroundColor:"#000",
					frontColor:"#fff"
			})

			return {
				showToast,
				showLoading,
				showModal,
				showActionSheet,
				name
			}
		}
	}
</script>

<style scoped>

</style>
